<template>
  <div>
    <div class="search_form">
			<div>
				<el-select
					size="mini"
					clearable
					placeholder="请选择船名航次"
					v-model="searchForm.shipvoyageId"
          filterable
          remote
          :remote-method="getshipList"
					class="others"
					popper-class="selectClass"
				>
					<el-option v-for="(item, index) in shipList" :key="index" :label="item.shipvoyageName" :value="item.shipvoyageId"></el-option>
				</el-select>
				<el-select
					size="mini"
					clearable
					placeholder="选择库号"
					v-model="searchForm.fumHouseId"
					class="others"
				>
					<el-option v-for="item in storehouseList" :key="item.id" :label="item.storehouseName" :value="item.id" />
				</el-select>

				<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="searchData">查询</el-button>
				<el-button icon="el-icon-refresh-right" size="mini" @click="resetSearch">重置</el-button>
			</div>
      <div>
        <el-button size="mini" icon="el-icon-plus" type="primary" v-hasPermi="['productManagement:TPrdFum:insert']" @click="add">新增</el-button>
      </div>
    </div>
    <!-- 主列表table -->
    <BaseTable :loading="loading" :data="tableData" :columns="columns" :tableHeight="tableHeight" @details="getSelectRow" :pagination="queryall" @size-change="sizeChange" @current-change="pageChange">
      <el-table-column
          fixed="right"
          align="center"
          label="操作"
          slot="operationColumn"
          width="150px">
        <template slot-scope="scope">
          <el-button
              size="mini"
              v-hasPermi="['productManagement:TPrdFum:update']"
              @click.stop="handleEdit(scope.row)"><span style="color:#0B6CD6"><i class='iconfont icon-1-07'></i>编辑</span></el-button>
          
            <el-button
              size="mini"
              v-hasPermi="['productManagement:TPrdFum:delete']"
              @click.stop="handleDelete(scope.row.id)"><span style="color:#F75E5E"><i class='iconfont icon-1-08'></i>删除</span></el-button>
        </template>
      </el-table-column>
    </BaseTable>
    <el-drawer
      title="熏蒸信息"
      :visible.sync="isShow"
      direction="rtl"
      size="60%">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="船舶信息" name="1">
          <el-form :model="form" ref="basisRulesRef" style="padding:10px 10px;" label-position="top">
            <el-row>
              <el-col :span="8">
                <el-form-item label="船名航次">
                  <el-select
				          	size="mini"
				          	clearable
				          	placeholder="请选择船名航次"
				          	v-model="form.shipvoyageId"
                    filterable
                    remote
                    :remote-method="getshipList"
				          	class="others"
				          	popper-class="selectClass"
                    @change="seleinfobyid"
                    style="width: 100%"
				          >
				    	      <el-option v-for="(item, index) in shipList" :key="index" :label="item.shipvoyageName" :value="item.shipvoyageId"></el-option>
				          </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="船代">
                  <el-input v-model="form.customerName" size="mini" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="货主">
                  <el-input v-model="form.shipperName" size="mini" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="提单件数">
                  <el-input v-model="form.billNum" size="mini" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="提单方数">
                  <el-input v-model="form.billVolume" size="mini" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="船舶信息" name="2">
          <el-form :model="form" ref="basisRulesRef" style="padding:10px 10px;" label-position="top">
            <el-row>
              <el-col :span="8">
                <el-form-item label="库号">
                  <el-select
				          	size="mini"
				          	clearable
				          	placeholder="选择库号"
				          	v-model="form.fumHouseId"
                    v-selecttext="form.storehouseName,storehouseList,'id'"
				          	class="others"
                    style="width: 100%"
				          >
				          	<el-option v-for="item in storehouseList" :key="item.id" :label="item.storehouseName" :value="item.id" />
				          </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="投药量">
                  <el-input v-model="form.dosage" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="装车时间">
                  <el-date-picker
                    v-model="form.loadTime"
                    type="datetimerange"
                    size="mini"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    @focus="focusdate"
                    @change="changedate">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库时间">
                  <el-date-picker
                    v-model="form.inHouse"
                    type="datetimerange"
                    size="mini"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['12:00:00']"
                    @change="inhouseChange">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="入库车数">
                  <el-input v-model="form.inNum" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="建单时间">
                  <el-date-picker
                    v-model="form.billTime"
                    type="datetime"
                    size="mini"
                    style="width: 100%"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单号">
                  <el-input v-model="form.billNo" size="mini"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item>
                  <template slot-scope="">
                    <span style="color:#606266;padding-right: 10px">预计出库时间</span>
                    <el-button type="text" @click="sixclick">16小时</el-button>
                    <el-button type="text" @click="twentyfourclick">24小时</el-button>
                  </template>
                  <el-date-picker
                    v-model="form.preOutTime"
                    type="datetime"
                    style="width: 100%;margin-top: 10px"
                    size="mini">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="出库时间">
                  <el-date-picker
                    v-model="form.outTime"
                    type="datetimerange"
                    size="mini"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['12:00:00']">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="卸车时间">
                  <el-date-picker
                    v-model="form.unloadTime"
                    type="datetimerange"
                    size="mini"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['12:00:00']">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="出库车数">
                  <el-input v-model="form.unloadNum" size="mini"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="备注">
                  <el-input type="textarea" row="2" v-model="form.remark"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <div class="demo-drawer__footer">
        <el-button
          size="small"
          type="primary"
          @click="addUpdate()"
        >保 存</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public/index'
import api from '@/api/Product/fumigation/index'
export default {
  components: { BaseTable },
  data () {
    return{
      searchForm: {
        shipvoyageId: '', //
        fumHouseId: '',
      },
      loading: false,
      tableData: [],
      columns: [
        {
          prop: 'shipName',
          label: '船名航次',
          width: 120
        },{
          prop: 'fumHouseName',
          label: '库号'
        },{
          prop: 'dosage',
          label: '投药量'
        },{
          prop: 'loadTime',
          label: '装车时间',
          width: 100
        },{
          prop: 'inTime',
          label: '入库时间',
          width: 100
        },{
          prop: 'inNum',
          label: '入库车数'
        },{
          prop: 'billTime',
          label: '建单时间',
          width: 120
        },{
          prop: 'billNo',
          label: '单号'
        },{
          prop: 'preOutTime',
          label: '预计出库时间',
          width: 120
        },{
          prop: 'outTime',
          label: '出库时间',
          width: 100
        },{
          prop: 'unloadTime',
          label: '卸车时间',
          width: 100
        },{
          prop: 'unloadNum',
          label: '出库车数'
        },{
          prop: 'remark',
          label: '备注',
          width: 100
        },{
          prop: '',
          label: '值班人员'
        },
        // {
        //   label: '操作',
        //   width: 160,
        //   render: (h, params) => {
        //     return h(
        //       'div',
        //       {
        //         class: 'btnClass'
        //       },
        //       [
        //         h('el-button', {
        //           props: {
        //             size: 'mini'
        //           },
        //           style: {
        //             marginRight: '10px'
        //           },
        //           domProps: {
        //             // 添加标签,使用自己引入的iconfont图标
        //             innerHTML:`<span style='color:#0B6CD6'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
        //           },
        //           on: {
        //             click: () => {
        //               click: this.handleEdit(params.row)
        //             }
        //           }
        //         }),
        //         h('el-button', {
        //         	props: {
        //         		size: 'mini',
        //         	},
        //         	domProps: { // 添加标签,使用自己引入的iconfont图标
        //         		innerHTML: "<span style='color:#DA2821;'><i class='iconfont icon-1-08'></i>删除</span>"
        //         	},
        //         	on: {
        //         		click: () => {
        //         			click: this.handleDelete(params.row.id)
        //         		}
        //         	}
        //         }),
        //       ]
        //     )
        //   }
        // }
      ],
      shipList: [], // 船名航次列表
      storehouseList: [], // 库号
      tableHeight: window.innerHeight - 210,
      selectInfo: null, // 选中行信息
      // 页码
      queryall: {
        totalNum: 0,
        startpage: 1,
        pagesize: 15
      },
      menuArr: [],
      // 编辑列表
      form: {
        shipvoyageId: '',
        customerName: '',
        shipperName: '',
        billNum: '',
        billVolume: '',
        fumHouseId: '',
        dosage: '',
        billNo: '',
        loadTime: [],
        inHouse: [],
        inNum: '',
        billTime: '',
        outTime: [],
        preOutTime: '',
        unloadTime: [],
        unloadNum: '',
        remark: '',
      },
      isShow: false,
      inhouselist: null, // 入库时间
      activeNames: ['1','2'],
    }
  },
  activated () {
    var menuArr = []
    var menuId = ''
    if (localStorage.getItem('menuArr')) {
      menuArr = JSON.parse(localStorage.getItem('menuArr'))
    }
    menuArr.map(item => {
      item.children.map(v => {
        if (window.location.href.includes(v.url)) {
          menuId = v.id
        }
      })
    })

    if (menuId) {
      this.menuArr = []
      publicapi.getPermissionsBtn(menuId)
        .then(res => {
          res.data.data.map(item => {
            this.menuArr.push(item.RESOURCENAME)
          })
        }).catch((error) => {})
    }
    if (this.$store.state.app.searchResouce == 'menu') {
      this.queryAll = {
        companyName: '',
        startpage: 1,
        pagesize: 10
      }
    }
    // this.searchData()
    this.getshipList('')
    this.getStorehouse()
  },
  methods: {
    // 查询主列表数据
    searchData () {
      this.loading = true
      let params = Object.assign({}, this.queryall,this.searchForm)
      api.gettabledata(params).then(res => {
        this.loading = false
        this.tableData = res.data.data.pages
        this.queryall.startpage = res.data.data.pageNum
        this.queryall.totalNum = res.data.data.totalNum

        this.tableData.forEach(v => {
          if (v.loadStartTime && v.loadEndTime) {
            v.loadTime = v.loadStartTime.substring(11,16) + '~' + v.loadEndTime.substring(11,16)
          }
          if (v.inStratTime && v.inEndTime) {
            v.inTime = v.inStratTime.substring(11,16) + '~' + v.inEndTime.substring(11,16)
          }
          if (v.outStartTime && v.outEndTime) {
            v.outTime = v.outStartTime.substring(11,16) + '~' + v.outEndTime.substring(11,16)
          }
          if (v.unloadStartTime && v.unloadEndTime) {
            v.unloadTime = v.unloadStartTime.substring(11,16) + '~' + v.unloadEndTime.substring(11,16)
          }
          
        })
        this.selectInfo = null
      })
    },
    // 重置查询条件
    resetSearch () {
      this.searchForm = {
        shipvoyage: '', //
        storehouse: '',
      }
    },
    // 查询库号
    getStorehouse () {
      api.querystorehousename().then(res => {
        this.storehouseList = res.data.data
      })
    },
    // 新增熏蒸信息
    add () {
      this.restForm()
      if (this.$refs.basisRulesRef != undefined) {
        this.$refs.basisRulesRef.resetFields()
      }
      this.isShow = true
    },
    // 获取行信息
    getSelectRow (row) {
      console.log(row)
      this.selectInfo = row
    },
    // 分页查询
    sizeChange(val) {
      this.queryall.pagesize = val;
      this.searchData();
    },
    // 分页查询
    pageChange(val) {
      this.queryall.startpage = val;
      this.searchData();
    },
    // 获取船名航次
    getshipList (value) {
      let params = {
        shipvoyage: value
      }
      publicapi.getListShipvoyage(params).then(res=> {
        this.shipList = res.data.data
      })
    },
    // 重置表单
    restForm () {
      this.form.shipvoyageId = ''
      this.form.customerName = ''
      this.form.shipperName = ''
      this.form.billNum = ''
      this.form.billVolume = ''
      this.form.fumHouseId = ''
      this.form.dosage = ''
      this.form.billNo = ''
      this.form.inNum = ''
      this.form.billTime = ''
      this.form.preOutTime = ''
      this.form.unloadNum = ''
      this.form.remark = ''
      
      this.form.loadTime = []
      this.form.inHouse = []
      this.form.outTime = []
      this.form.unloadTime = []
    },
    // 编辑
    handleEdit (row) {
      console.log(row)
      this.restForm()
      // 获取船舶信息
      this.seleinfobyid(row.shipvoyageId)

      this.form.id = row.id
      this.form.shipvoyageId = row.shipvoyageId
      this.form.fumHouseId = row.fumHouseId
      this.form.dosage = row.dosage
      this.form.billNo = row.billNo
      this.form.inNum = row.inNum
      this.form.billTime = row.billTime
      this.form.preOutTime = row.preOutTime
      this.form.unloadNum = row.unloadNum
      this.form.remark = row.remark

      if (row.loadStartTime && row.loadEndTime) {
        let list = [row.loadStartTime,row.loadEndTime]
        this.$set(this.form, 'loadTime',list)
        console.log(this.form.loadTime)
      }
      if (row.inStratTime && row.inEndTime) {
        let list1 = [row.inStratTime,row.inEndTime]
        this.$set(this.form, 'inHouse',list1)
      }
      if (row.outStartTime && row.outEndTime) {
        let list2 = [row.outStartTime,row.outEndTime]
        this.$set(this.form, 'outTime',list2)
      }
      if (row.unloadStartTime && row.unloadEndTime) {
        let list3 = [row.unloadStartTime,row.unloadEndTime]
        this.$set(this.form, 'unloadTime',list3)
      }
      
      this.isShow = true
    },
    // 删除
    handleDelete (id) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          api.deletebyid(id).then(() => {
            this.searchData()
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 通过航次id获取信息
    seleinfobyid (value) {
      console.log(value)
      if (!value) return
      api.getdatabyid(value).then(res => {
        let data = res.data.data
        this.$set(this.form,'customerName',data.customerName)
        this.$set(this.form,'shipperName',data.shipName)
        this.$set(this.form,'billNum',data.quantity)
        this.$set(this.form,'billVolume',data.volume)
      })
    },
    // 入库时间
    inhouseChange (value) {
      console.log(value)
      this.inhouselist = value[1]
    },
    // 16小时事件
    sixclick () {
      if (!this.inhouselist) {
        return this.$message.info('先选择入库时间')
      }
      let inhoustime = this.inhouselist
      let preOtTime = inhoustime.setHours(inhoustime.getHours() + 16)
      this.$set(this.form, 'preOutTime', this.format(new Date(preOtTime),'yyyy-MM-dd HH:mm:ss'))
      console.log(this.form.preOutTime)
      this.$forceUpdate()
    },
    // 24小时事件
    twentyfourclick () {
      if (!this.inhouselist) {
        return this.$message.info('先选择入库时间')
      }
      let inhoustime = this.inhouselist
      let preOtTime = inhoustime.setHours(this.inhouselist.getHours() + 24)
      this.$set(this.form, 'preOutTime', this.format(new Date(preOtTime),'yyyy-MM-dd HH:mm:ss'))
      console.log(this.form.preOutTime)
      this.$forceUpdate()
    },
    // 日期格式化
    format(date, fmt) {
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "H+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        "S": date.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ?
            (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
      }
      return fmt;
    },
    changedate (value) {
      console.log(value);
    },
    focusdate(value) {
      console.log(value)
    },
    // 新增编辑
    addUpdate () {
      if (this.form.id) {
        this.updatadata()
      } else {
        this.adddata()
      }
    },
    // 新增
    adddata () {
      let params = Object.assign({}, this.form)
      params.fumHouseName = this.form.storehouseName
      params.loadStartTime = this.form.loadTime[0]
      params.loadEndTime = this.form.loadTime[1]
      params.inStratTime = this.format(this.form.inHouse[0],'yyyy-MM-dd HH:mm:ss')
      params.inEndTime = this.format(this.form.inHouse[1],'yyyy-MM-dd HH:mm:ss')
      params.outStartTime = this.form.outTime[0]
      params.outEndTime = this.form.outTime[1]
      params.unloadStartTime = this.form.unloadTime[0]
      params.unloadEndTime = this.form.unloadTime[1]
      delete params.outTime
      delete params.loadTime
      delete params.inHouse
      delete params.unloadTime
      api.insert(params).then(res => {
        this.$message.success('新增成功')
        this.isShow = false
        this.searchData()
      })
    },
    // 编辑
    updatadata () {
      console.log(this.form)

      let params = Object.assign({}, this.form)
      params.fumHouseName = this.form.storehouseName
      if (this.form.loadTime) {
        params.loadStartTime = this.form.loadTime[0]
        params.loadEndTime = this.form.loadTime[1]
      }
      if (this.form.inHouse) {
        params.inStratTime = this.format(new Date(this.form.inHouse[0]),'yyyy-MM-dd HH:mm:ss')
        params.inEndTime = this.format(new Date(this.form.inHouse[1]),'yyyy-MM-dd HH:mm:ss')
      }
      if (this.form.outTime) {
        params.outStartTime = this.form.outTime[0]
        params.outEndTime = this.form.outTime[1]
      }
      if (this.form.unloadTime) {
        params.unloadStartTime = this.form.unloadTime[0]
        params.unloadEndTime = this.form.unloadTime[1]
      }
      
      delete params.outTime
      delete params.loadTime
      delete params.inHouse
      delete params.unloadTime
      api.updatebyid(params).then(res => {
        this.$message.success('编辑成功')
        this.isShow = false
        this.searchData()
      })
    },
  }
}
</script>
<style lang="less" scoped>
@import "../../../assets/searchfrom.less";
/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-form-item {
  padding-right: 20px;
}
.titleclass{
  background-color: #fafafa;
  height: 50px;
  width: 103%;
  margin-top: -10px;
  margin-left: -10px;
  line-height:50px;
}
.titleclass2{
  background-color: #fafafa;
  height: 50px;
  width: 103%;
  margin-left: -10px;
  line-height:50px;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
  margin-bottom: 50px;
}
/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
  z-index: 20;
}
</style>
